<template>
  <uni-popup ref="popup" type="center">
    <view class="package column" style="width:600rpx;padding:30rpx;" v-if="list">
      <view style="width:80%;margin:0px auto;text-align: center;">{{list.msg}}</view>
      <view class="space-between" style="width:70%;margin:20rpx 0px 40rpx;">
        <view class="column but" style="font-size: 24rpx;">
          <text style="font-size: 30rpx;">{{list.nums}}</text>
          <text>蓝宝石</text>
          <text>已获得</text>
        </view>
        <view style=" transform: rotate(150deg);">
          <uni-icons type="undo-filled" size="50" color="#29ADF7"></uni-icons>
        </view>
        <view class="column but" style="font-size: 28rpx;">
          <text style="font-size: 40rpx;">{{list.gem}}</text>
          <text>蓝宝石</text>
          <text>可膨至</text>
        </view>
      </view>
      <view class="add" @click="expansion()">去膨胀</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getActivityGem } from '@/gql/account';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  const driver_id = getDriverID();
  const popup = ref(null)
  const list = ref()
  const emit = defineEmits(['expansion']);
  function init() {
    const payload = {
      query: getActivityGem,
      variables: { driver_id },
    };
    toPublish('ql/score/getActivityGem', payload, (obj) => {
      const { getActivityGem } = obj.data;
      list.value = getActivityGem
      if (getActivityGem.nums) {
        open()
      }
    });
  }
  function expansion() {
    emit('expansion');
    close()
  }
  function open() {
    popup.value.open();
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    close,
    open,
    init
  });
</script>

<style scoped lang="less">
  .add {
    width: 230rpx;
    height: 69rpx;
    border-radius: 5px;
    text-align: center;
    line-height: 69rpx;
    background: #468FF5;
    color: #FFF;
    margin: 0rpx auto;
  }

  .but {
    background: linear-gradient(180deg, #28BFF2, #2B93FE);
    border-radius: 5px;
    padding: 15rpx 20rpx;
    box-sizing: border-box;
    color: #fff;

    text:nth-of-type(2) {
      margin: 8rpx 0px;
    }
  }
</style>